<template>
	<view class="recommend">
		<scroll-view scroll-y="true" :style="{'height': $attrs.height + 'px'}" @scrolltolower="handleTolower">
			<!-- 顶部 -->
			<view class="recommend_wrap">
				<view class="recommend_item" v-for="(item, i) in recommends" :key="i">
					<image :src="item.thumb"></image>
				</view>
			</view>
			<!-- 标题 -->
			<view class="month_title">
				<view class="month_title_left">
					<text>{{ message.day }}/</text>
					<text>{{ message.month }}月</text>
					<text>{{ message.title }}</text>
				</view>
				<view class="month_title_right">更多></view>
			</view>
			<!-- 图片 -->
			<view class="image_lazy">
				<u-lazy-load v-for="(item, i) in imagesList" :key="i" :image="item.thumb + item.rule.replace('$<Height>', '360')" class="image_lazy_item"></u-lazy-load>
			</view>
			<!-- 热门 -->
			<view class="hot_title">热门</view>
			<view class="image_lazy">
				<u-lazy-load v-for="(item, i) in imagesList2" :key="i" :image="item.thumb" class="image_lazy_item"></u-lazy-load>
			</view>
			<!-- 加载 -->
			<u-loadmore :status="loadStatus" :load-text="loadText" v-show="showLoading" class="showLoading" />
		</scroll-view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			recommends: [],
			imagesList: [],
			message: {
				day: '日期',
				month: '月份',
				title: '标题'
			},
			imagesList2: [],
			params: {
				limit: 30,    // 请求条数
				order: 'hot', // 请求类型
				skip: 0       // 跳过条数
			},
			showLoading: true,
			loadStatus: 'loading',
			loadText: {
				loading: '努力加载中',
				nomore: '我是有底线的'
			}
		}
	},
	methods: {
		handleTolower() {
			if (this.loadStatus === 'nomore') return
			this.showLoading = true
			this.loadStatus = 'loading'
			this.params.skip += 30
			this.getRecommends()
		},
		// 获取数据
		getRecommends() {
			uni.request({
				url: '/dpc/image/v3/homepage/vertical',
				method: 'GET',
				data: this.params,
				success: result => {
					if (result.statusCode === 200) {
						console.log(result)
						this.recommends = result.data.res.homepage[1].items
						this.imagesList = result.data.res.homepage[2].items
						this.message.day = this.$moment(result.data.res.homepage[1].stime).format('DD')
						this.message.month = this.$moment(result.data.res.homepage[1].stime).format('MM')
						this.message.title = result.data.res.homepage[2].title
						// 
						if (result.data.res.vertical.length === 0) return this.loadStatus = 'nomore'
						this.imagesList2 = [
							...this.imagesList2,
							...result.data.res.vertical
						]
						this.showLoading = false
					} else {
						uni.showToast({
							title: '请求失败',
							icon: 'none'
						})
					}
				}
			})
		}
		// 
	},
	mounted() {
		this.getRecommends()
	}
	// 
}
</script>

<style lang="scss">
.recommend {
	width: 734upx;
	margin: 0 auto;
	.recommend_wrap {
		margin: 10upx 0 20upx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		.recommend_item {
			margin-bottom: 8upx;
			image {
				width: 363upx;
				height: 226upx;
				vertical-align: middle;
			}
		}
	}
	.month_title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1upx solid #ccc;
		padding-bottom: 10upx;
		margin-bottom: 10upx;
		.month_title_left {
			text {
				font-size: 34upx;
				color: #97113e;
				&:first-child {
					font-weight: bold;
				}
				&:nth-child(2) {
					font-size: 25upx;
					margin-right: 15upx;
				}
				&:last-child {
					color: #555;
				}
			}
		}
		.month_title_right {
			font-size: 30upx;
			color: #97113e;
		}
	}
	.image_lazy {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		.image_lazy_item {
			width: 243upx;
			height: 400upx;
			margin-bottom: 4upx;
			/deep/ .u-lazy-item {
				height: 400upx!important;
				> div {
					background-size: cover!important;
					background-position: top center;
				}
			}
		}
	}
	.hot_title {
		color: #555;
		font-size: 34upx;
		margin: 20upx 0 10upx;
		padding-left: 15upx;
		border-left: 12upx solid #97113e;
	}
	.showLoading {
		padding: 20upx 0 30upx;
	}
}
</style>
